<template>
    <div class="">
      <!-- view-wrapper -->
      <div class="head" >
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="90px">
          <el-form-item label="用户查询" prop="customer">
            <el-input v-model="queryParams.customer" placeholder="请输入姓名、手机号" clearable size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="关键字查询" prop="keyword">
            <el-input v-model="queryParams.keyword" placeholder="活动名称/回收单号" clearable size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="回收时间：" prop="date">
            <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" size="small" range-separator="至" 
              start-placeholder="开始日期" end-placeholder="结束日期" @change="handleTime">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="listBox">
        <div class="btn_top">
          <div class="money_list"> </div>
          <div class="btnBox">
            <export-excel-button title="盲盒回收明细" action="/box/activity/recycle/export" :params="ExportParams" />
          </div>
        </div>
        <el-table :data="getOrderList" border style="width: 100%;margin-top:14px" >
          <el-table-column label="序号" type="index" width="55" align="center" fixed />
          <el-table-column prop="activityName" align="center" label="活动名称" />
          <el-table-column prop="recycleNo" align="center" label="回收单号" />
          <el-table-column prop="time" align="center" label="回收时间" />
          <el-table-column prop="phoneNumber" align="center" label="手机号" />
          <el-table-column prop="customerName" align="center" label="姓名" />
          <el-table-column prop="boxAmount" align="center" label="回收数量" />
          <el-table-column prop="integralPrice" align="center" label="回收单价" />
          <el-table-column prop="integralAmount" align="center" label="回收价格" />
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </div>
    
    </div>
  </template>
  <script>
  import {
    boxActivityRecycleList,
  } from '@/api/blindBox/boxOrder'
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  
  export default {
    name: "shopDetail",
    components: {
      ExportExcelButton
    },
    props: {
      id: String,
    },
    data() {
      return {
        getOrderList:[],
        total: 0,
        date: [],
        boxTypeList:[],//支付类型
        queryParams: {
          keyword: '',//活动名称/订单号/盲盒奖品
          pageNum: 1,
          pageSize: 10,
          customer: '',//手机号码/姓名
          startTime: '',
          endTime: '',
        },
      };
    },

    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.getList()
    },
    methods: {
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm();
        this.$refs["queryForm"].resetFields();
        this.date = []
        this.handleQuery();
      },
      handleTime(e){
        this.queryParams.startTime = this.date[0]
        this.queryParams.endTime = this.date[1]
      },
      /** 查询盲盒订单列表 */
      getList() {
        this.loading = true;
        if(this.date){
          this.queryParams.startTime = this.date[0]
          this.queryParams.endTime = this.date[1]
        }
        boxActivityRecycleList(this.queryParams).then(response => {
          const {records ,total} = response.result
          console.log('response',response)
          this.getOrderList = records
          this.total = total
          this.loading = false;
        });
      },
      
    },
  };
  </script>
  <style lang="scss" scoped>
  .head {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px 0;
      margin-top: 10px;
    }
    .listBox {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      //   height: 120px;
      padding: 20px 20px;
      margin-top: 10px;
    }

    .btnBox{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  </style>
  